<template>
  <div class="back-img">
    <form onsubmit="" action="" method="post">
      <fieldset>
        <div class="input-box">
          <p>&nbsp;&nbsp;&nbsp;登&nbsp;&nbsp;录</p>

          <input type="text" name="username" placeholder="用户名" id="username" title="输入用户名">
          <sup><span class="error" id="usernameErr">&nbsp;</span></sup>
          <br>

          <input type="password" name="password" placeholder="密码" id="password" title="输入密码">
          <sup><span class="error" id="passwordErr">&nbsp;</span></sup>
          <br>
          <!--<label for="keepLogin">保持7天登录</label>-->
          <!--<input type="checkbox" name="keepLogin" id="keepLogin">-->

          <input class="button" type="submit" value="登录" id="login" title="登录">
          <!--          <a class="button" id="register" title="注册">注&nbsp;&nbsp;&nbsp;册</a>-->
          <router-link to="/register" @click="goToRegister" class="button" id="register" title="注册">注&nbsp;&nbsp;&nbsp;册</router-link>
        </div>
        <div class="other">
          <a id="forget" onclick="forget()" title="忘记密码">😇忘记密码</a>
          <a id="help" onclick="help()" title="帮助">帮助🤷‍</a>
        </div>
      </fieldset>
    </form>
  </div>
</template>

<script>
export default {
  name: "LoginPage",
  methods: {
    goToRegister() {
      console.log(this.$router)
      this.$router.push('/register')
    }
  }
}
</script>

<style scoped>
body {
  background: rgb(270, 270, 270);
}

p {
  color: #008559;
  text-align: center;
  font-size: 46px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 22px;
}

form {
  padding-top: 5%;
  display: flex;
  justify-content: center;
  align-items: center;
}

fieldset {
  margin-top: 3%;
  width: 400px;
  height: 476px;
  background-color: rgb(250, 250, 250);
  border: none;
  border-radius: 20px;
  box-shadow: 0 0 60px 1px #00521b;
}

legend {
  text-align: center;
  font-size: 50px;
}

input {
  padding-left: 10px;
  width: 95%;
  height: 50px;
  font-size: 14px;
  border-radius: 5px;
  border: 2px solid rgb(200, 200, 200);
  outline-color: #98dac5;
}

span {
  margin-bottom: 100px;
}

a {
  color: #008559;
  text-decoration: none;
  background-color: transparent;
  outline: none;
  cursor: pointer;
}

.back-img {
  background-image: url(../../static/img/background-main-green.png);
  background-size: cover;
  background-repeat: no-repeat;
  width: 99.45vw;
  height: 52vw;
  position: relative;
}

.error {
  color: red;
  font-size: 14px;
  margin-left: 24px;
}

.input-box {
  width: 90%;
  height: 290px;
  margin-left: 4px;
}

.button {
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 6px;
}

.other {
  width: 380px;
  margin: 90px 24px;
}

#username {
  letter-spacing: 1px;
}

#password {
  letter-spacing: 5px;
}

#username, #password {
  margin: 2px 20px;
}

#login {
  background-color: #56ad8f;
  border: none;
  color: white;
  width: 382px;
  height: 52px;
  margin: 1px 20px;
}

#login:hover {
  background-color: #119a6a;
}

#register {
  background-color: #ffffff;
  border: 1px solid #c8c8c8;
  color: #252525;
  width: 317px;
  height: 21px;
  margin: 12px 20px;
}

#register:hover {
  background-color: #e5e5e5;
}

#forget {
  float: left;
}

#help {
  float: right;
}

#help:hover, #forget:hover {
  color: #00521b;
}
</style>